<template>
  <fieldset>
    <legend>三级联动</legend>
    <!-- 省 -->
    <select v-model="sel1" @change="provienceChange(sel1)">
        <option v-for="item in provience" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    <select v-model="sel2" @change="countryChange(sel2)">
        <option v-for="item in citys" :key="item.id" :value="item.id">{{item.name}}</option>
    </select>
    <select v-model="sel3" >
        <option v-for="item in countrys" :key="item.id" :value="item.parentId">{{item.name}}</option>
    </select>
  </fieldset>
</template>

<script>
import * as api from "@/api/select"
export default {
  data(){
    return {
      provience:[],
      citys:[],
      countrys:[],
      sel2:"",
      sel1:1,
      sel3:""
    }
  },
mounted(){
  api.fetchData()
  .then(res => {
    console.log(res);
    this.provience = res
    let pid = res[0].id
    this.provienceChange(pid)
  })
},
methods:{
  provienceChange(pid){
    api.fetchCity(pid)
    .then(res => {
      console.log(res);
      this.citys = res
      if(res.length>0){
        this.sel2 = res[0].id
      }
      let cid = res[0].id
      this.countryChange(cid)
    })
  },
  countryChange(cid){
    api.fetchCountry(cid)
    .then(res => {
      console.log("县",res);
      this.countrys = res
      if(res.length>0){
        this.sel3 = res[0].parentId
      }
    })
  }
}
}
</script>

<style>
select{
    width: 150px;
    height:30px
}
</style>